<template>
	<view>
		<!-- #ifndef H5 -->
		<view class="bg" style="position: fixed;top: 0upx;left: 0;right: 0;z-index: 99;">
		<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="bg " style="position: fixed;top:85upx;left: 0;right: 0;z-index: 99;">
			<!-- #endif -->
				<view class="flex text-center ">
					<view v-for="(item,index) in tab" :key="index" class="flex-sub padding-tb"
						:class="item.id==tabIndex?'active':''" @click="changeTab(item.id)">
						{{item.name}}
					</view>
				</view>
				<view>
					<ren-dropdown-filter v-if="dataList.length>0" :filterData='filterData' :border="false"
						:defaultIndex='defaultIndex' @onSelected='change' @onSelectedIndex="onSelectedIndex"
						class="u-skeleton-rect">
					</ren-dropdown-filter>
				</view>
			</view>
			
			<view style="height:180upx;"/>
			<view>
				<u-notice-bar duration="1000" :list="orderBroadcastList" mode="vertical" />
			</view>

			<view style="margin-top:190upx;" v-if="userId">
				<view class="bg margin-lr radius margin-top-sm" v-for="(item,index) in orderList" :key="index">
					<view class="flex justify-between padding-lr padding-tb align-center">
						<view class="flex align-center">
							<image :src="item.avatar?item.avatar:'../../static/logo.png'"
								style="width: 48upx;height: 48upx;border-radius: 48upx;">
							</image>
							<view class="margin-left-xs">{{item.userName}}</view>
						</view>
						<view>{{item.createTime}}发布</view>
					</view>
					<view style="border-top: 1rpx solid #F2F2F2;"></view>
					<view class="flex align-center padding-lr padding-tb">
						<view @click="saveImg(item.image)">
							<image :src="item.image" mode="aspectFill"
								style="width: 200rpx;height: 200rpx;border-radius: 16rpx;">
							</image>
						</view>

						<view class="margin-left-sm" style="width: 60%;" @click.stop="bindDetail(item.id)">
							<view class=" text-lg text-bold  ">{{item.fixedClassifyName}}
								<text class="">- {{item.content}}</text>
							</view>
							<view class=" text-26 margin-tb-xs text-cut" style="color: #999999;width: 420rpx;">
								服务地址：{{item.detailsAddress}}</view>
							<view class="flex text-26 " style="color: #999999;">预约时间：{{item.deliveryTime}}</view>
							<view class="flex text-26 margin-top-xs " style="color: #999999;">服务距离：{{item.distance}}

							</view>
						</view>
					</view>
					<view style="border-top: 1rpx solid #F2F2F2;margin-top: 30upx;"></view>
					<view class="flex align-center justify-between  padding-lr padding-tb-sm">
						<view class="text-lg text-bold" style="color: #557EFD;" v-if="item.taskType==1">
							悬赏任务￥{{item.rateMoney}}</view>
						<view class="text-lg text-bold" style="color: #557EFD;" v-if="item.taskType==3">
							一口价任务￥{{item.rateMoney}}</view>
						<view v-if="item.taskType==2">还剩<text style="color: #557EFD;">{{item.surplusPeople}}</text>个报价名额
						</view>
						<view class="btn" v-if="item.taskType==2" @click="bindDetail(item.id)">报价</view>
						<view class="btn" v-else @click="bindDetail(item.id)">抢单</view>
					</view>
				</view>
			</view>
			<view v-if="!userId">
				<empty></empty>
			</view>
			<view v-else>
				<empty v-if="orderList.length==0"></empty>
			</view>


		</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				tab: [{
					id: 0,
					name: '全部订单'
				}, {
					id: 1,
					name: '悬赏订单'
				}, {
					id: 2,
					name: '报价订单'
				}, {
					id: 3,
					name: '一口价订单'
				}],
				tabIndex: 0,
				page: 1,
				limit: 10,
				orderList: [],
				defaultIndex: [0, 0, 0],
				filterData: [
					[{
						label: '距离',
						value: '',
					}, {
						label: '距离最远',
						value: 3,
					}, {
						label: '距离最近',
						value: 4,
					}],
					[{
							label: '类型',
							value: '',
						},
						{
							label: '保洁清洗',
							value: '1',
						}, {
							label: '做饭保姆',
							value: '2',
						}, {
							label: '房屋维修',
							value: '3',
						}, {
							label: '家电维修',
							value: '4',
						}
					],
					[{
							label: '赏金',
							value: '',
						},
						{
							label: '从高到低',
							value: '1',
						},
						{
							label: '从低到高',
							value: '2',
						}
					],
				],
				value1: '',
				userId: '',
				value2: '',
				value3: '',
				sxIndex: '',
				latitude: '',
				longitude: '',
				token: '',
				geRen: '',
				dataList: [],
				arr: [],
			}

		},
		onLoad() {
			this.$Request.getT('/app/common/type/261').then(res => { //商家私聊消息通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.arr.push(res.data.value)
					}
				}
			})

			this.$Request.getT('/app/common/type/313').then(res => { //订单状态通知 313
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.arr.push(res.data.value)
					}
				}
			})
			this.$Request.getT('/app/common/type/630').then(res => { //新订单通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						this.arr.push(res.data.value)
					}
				}
			})

			let that = this
			that.token = this.$queue.getData('token');
			that.geRen = uni.getStorageSync("geRen")
			// console.log(that.geRen==2,'=======',that.geRen)
			if (that.token) {
				that.getwz()
				that.getorderlist()
				setInterval(function() {
					// that.orderList=[]
					that.page = 1
					that.getorderlist()
				}, 10000)

			} else {
				uni.showModal({
					title: '提示',
					content: '您还未登录,请先登录',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateTo({
								url: '/pages/public/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
			this.getGameList()

		},
		onShow() {
			this.userId = this.$queue.getData('userId');
			if (this.userId) {
				this.getRenZheng()
			}
			let jiedan = this.$queue.getData('jiedan');
			if (jiedan == 'jiedan') {
				this.page = 1
				this.getorderlist()

			}
			this.getOrderBroadcast();
		},
		methods: {
			/**
			 * 获取播报
			 */
			getOrderBroadcast(){
				this.$Request.get("/app/help/orderBroadcast").then(res=>{
					this.orderBroadcastList = res.data;
				})
			},
			// 查看图片
			saveImg(imgs) {
				// 预览图片
				console.log(imgs)
				let that = this;
				let imgArr = []
				imgArr.push(imgs);
				// //预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			changeTab(index) {
				this.tabIndex = index
				if (this.geRen == 2) {
					this.page = 1
					this.getorderlist()
				}
			},
			// 获取当前经纬度
			getwz() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.page = 1
						that.getorderlist()
					}
				});
			},
			// 筛选
			change(e) {
				// this.value1 = e[0][0].value //智能优选
				this.value1 = e[0][0].value //智能优选
				this.value2 = e[1][0].value //类型筛选
				this.value3 = e[2][0].value //价格筛选
				console.log(this.value3, '======', e[1][0].value)

			},
			onSelectedIndex(e) {
				console.log(e)
				this.sxIndex = e
				this.page = 1
				this.getorderlist()
			},
			getorderlist() {
				let userId = this.$queue.getData('userId');
				let taskType = this.tab[this.tabIndex].id == 0 ? '' : this.tab[this.tabIndex].id
				let sort = ''
				if (this.sxIndex == 0) {
					sort = this.value1
				} else if (this.sxIndex == 2) {
					sort = this.value3
				}
				let data = {
					page: this.page,
					limit: this.limit,
					classifyId: this.value2,
					latitude: this.latitude,
					longitude: this.longitude,
					sort: sort,
					taskType: taskType,
					userId: userId
				}
				this.$Request.get("/app/help/selectNewHelpOrderList", data).then(res => {
					if (res.code == 0) {
						for (var i = 0; i < res.data.list.length; i++) {
							if (res.data.list[i].image) {
								let image = res.data.list[i].image.split(',')
								res.data.list[i].image = image[0]
							}

							if (res.data.list[i].distance > 1000) {
								res.data.list[i].distance = Number((res.data.list[i].distance / 1000))
									.toFixed(2) + "km"
							} else {
								if (res.data.list[i].distance == '0') {
									res.data.list[i].distance = "0m";
								} else {
									res.data.list[i].distance = Number(res.data.list[i].distance).toFixed(
										1) + "m";
								}
							}
						}
						if (this.page == 1) {
							this.orderList = res.data.list
						} else {
							this.orderList = [...this.orderList, ...res.data.list]
						}
						this.$queue.remove('jiedan')
					}
					//请求结束后停止下拉
					uni.stopPullDownRefresh()
				});
			},
			// 获取分类列表
			getGameList() {
				this.$Request.get("/app/fixedClassify/getClassifyList").then(res => {
					if (res.code == 0) {
						let dataList = [];
						let data = {
							label: '类型',
							select: true,
							value: '',
						}
						dataList.push(data);
						res.data.forEach(res => {
							if (res.parentId != 0) {
								let data1 = {
									label: res.classifyName,
									value: res.classifyId,
								}
								dataList.push(data1);
								// console.log(data1)
							}
						})
						this.$nextTick(function() {
							this.dataList = dataList
							this.filterData[1] = this.dataList
						})
					}
				});
			},
			// 个人认证数据
			getRenZheng() {
				this.$Request.get("/app/userCertification/queryInsert").then(res => {
					if (res.code == 0) {
						if (res.data && res.data.classify) {
							this.classify = res.data.classify
							uni.setStorageSync("classify", res.data.classify)
						}

						if (res.data == null) {
							this.geRen = 0
							uni.setStorageSync("geRen", this.geRen)
						} else if (res.data.status == 0) {
							this.geRen = 1
							uni.setStorageSync("geRen", this.geRen)
						} else if (res.data.status == 1) {
							this.geRen = 2
							uni.setStorageSync("geRen", this.geRen)
						} else if (res.data.status == 2) {
							this.geRen = 3
							uni.setStorageSync("geRen", this.geRen)
						}
					}
				});
			},
			//跳转详情
			bindDetail(id) {
				let token = this.$queue.getData('token');
				if (token) {
					// 增加授权次数 +1
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								// console.log(re)
							}
						},
						fail: (res) => {
							// console.log(res)
						}
					})
					uni.navigateTo({
						url: '/pages/order/orderDetail?id=' + id
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '您还未登录,请先登录',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pages/public/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}



			},
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getorderlist()
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getorderlist()
		},
	}
</script>

<style>
	page {
		background: #F2F2F2;
	}

	.bg {
		background: #FFFFFF;
	}

	.box {
		flex: 1;
		text-align: center;
	}

	.active {
		flex: 1;
		background: #F2F5FF;
		color: #557EFD;
		padding: 30upx 0;
	}



	.btn {
		width: 160upx;
		height: 70upx;
		line-height: 70upx;
		background: #557EFD;
		border-radius: 40upx;
		/* width: 100%; */
		color: #FFFFFF;
		text-align: center;
		/* padding: 20upx 0; */
	}
</style>